<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <TemTree class="w-1/4 xl:w-1/5" @select="handleSelect" style="margin: 6px 0 6px 6px;"/>
    <div class="w-3/4 xl:w-4/5 ztable">
      <vxe-grid ref='xGrid' v-bind="gridOptions">
        <template #tbtns>
          <vxe-input v-model="formData.name" placeholder="输入名称查询"></vxe-input>
          <vxe-button @click="searchEvent" status="primary">查 询</vxe-button>
          <vxe-button @click="addEvent()">新 增</vxe-button>
          <vxe-button @click="deleteEvent($refs.xGrid)">删 除</vxe-button>
        </template>
        <template #name_default="{ row }">
          <span style="cursor:pointer;color: #3e9ece"
                @click="editEvent(row.id)">{{ row.name }}</span>
        </template>
      </vxe-grid>
    </div>
    <TemModal @register="registerModal" @closeModal="closeFlowModal"/>
  </PageWrapper>
</template>
<script lang="ts">
export default {name: 'WfInsMain', inheritAttrs: false, customOptions: {}}
</script>
<script lang="ts" setup>
import {PageWrapper} from '/@/components/Page';
import TemTree from './TemTree.vue';
import { reactive, ref, toRaw } from "vue";
import {VxeGridInstance, VxeGridProps} from 'vxe-table'
import {useDrawer} from '/@/components/Drawer';
import TemModal from "./TemModal.vue";
import {deleteEvent, createOption} from '/@/comps/vxe/list';
import { useGo } from '/@/hooks/web/usePage';
import { useModal } from "/@/components/Modal";



const [registerModal, {openModal}] = useModal();

const go = useGo();
const xGrid = ref({} as VxeGridInstance)
const formData = reactive({
  name: '',
  temid: '',
  temna: '',
  temty: '',
})

const gridOptions = reactive<VxeGridProps>(createOption('/wf/ins/main', {}, formData, [
  {type: 'checkbox', align: 'center', width: 42, fixed: 'left'},
  {type: 'seq', align: 'center', width: 50, fixed: 'left'},
  {field: 'name', title: '流程主题', width: 300, fixed: 'left', slots: {default: 'name_default'}},
  {field: 'notes', title: '备注'},
  {field: 'crtim', title: '创建时间', width: 140},
  {field: 'uptim', title: '更新时间', width: 140},
]));

const searchEvent = () => {
  xGrid.value.commitProxy('query')
}

function handleSelect(node) {
  if(node!=null){
    formData.temid = node.id;
    formData.temna = node.name;
    formData.temty = node.type;
  }else{
    formData.temid = '';
    formData.temna = '';
    formData.temty = '';
  }
  searchEvent();
}

function addEvent(){
  if(formData.temty=='main'){
    go('/wf/ins/main/new?temid='+formData.temid);
  }else{
    openModal(true, {
      opener: 'parent',
      orgs: [],
    });
    // alert(formData.temty);
  }
}

function closeFlowModal(back){
  if(back.flow&&back.flow.id){
    go('/wf/ins/main/new?temid='+back.flow.id);
  }
}



function editEvent(id){
  go('/wf/ins/main/'+id);
}

//--------------------------------------------------------------------------------------------------
const [registerDrawer, {openDrawer}] = useDrawer();

function handleSuccess() {
  searchEvent();
}
</script>

